<template>
  <b-scroll class="side-menu" ref="bScroll" v-if="categoryList.length" :b-scroll-object="bScrollObject">
    <div class="categoryList" v-for="(item,index) in categoryList" :key="index">
      <div class="categoryTitle" :class="{'category-active': item.maitKey === currentKey}"
           @click="categoryTitleClick(item.maitKey)">
        {{ item.title }}
      </div>
    </div>
  </b-scroll>
</template>

<script>
import BScroll from "@/components/component/bScroll/BScroll";
import {BScrollClass} from "@/common/constant";

export default {
  name: "SideMenu",
  props: {
    categoryList: {
      type: Array,
      default() {
        return [];
      }
    },
    currentKey: {
      type: String,
      default: null
    }
  },
  components: {
    BScroll
  },
  updated() {
    this.$refs.bScroll.refresh();
  },
  data() {
    return {
      bScrollObject: new BScrollClass().setShowBackToTop(false)
    }
  },
  methods: {
    categoryTitleClick(maitKey) {
      this.$emit("categoryTitleClick", maitKey);
    }
  }
}
</script>

<style scoped>
.side-menu {
  text-align: center;
  background-color: #f6f6f6;
}

.categoryList .categoryTitle {
  font-size: var(--font-size);
  height: 45px;
  line-height: 45px;
}

.categoryList .category-active {
  font-weight: 700;
  color: var(--color-high-text);
  background-color: var(--color-background);
  border-left: 3px solid var(--color-high-text);
}
</style>